<template>
  <!-- 好生活结佣汇总-楼盘成交详情-经纪人成交详情 -->
  <div class="brokerDealDetail">
    <el-tabs v-model="brokerActive">
      <borkerInfo :infos="infos"></borkerInfo>
      <template v-for="({label,name}) in tabList">
        <el-tab-pane :key="name" :label="label" :name="name" >
          <component :is="name" :idInfos="idInfos" :active="brokerActive === name"></component>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script type="text/ecmascript-6">
import brokerComm from "./brokerCommTable";
import brokerageComm from "./brokerageCommTable";
import borkerReward from "./borkerRewardTable";
import borkerInfo from "./borkerInfo";
import efComm from "./efCommTable";
import utils from "@/common/utils.js";

export default {
  name: "brokerDealDetail",
  components: {
    brokerComm,
    brokerageComm,
    borkerReward,
    efComm,
    borkerInfo
  },
  data() {
    return {
      brokerActive: "brokerComm",
      infos: [],
      rowInfos: {},
      idInfos: {
        brokerId: "",
        orderId: ""
      },
      brokerTypes: [
        "网络推客",
        "兼职经纪人",
        "案场销售",
        "职业经纪人",
        "经纪门店",
        "经纪公司",
        "置业专家",
        "开发商"
      ],
      tabList: [
        { label: "经纪人佣金详情", name: "brokerComm" },
        { label: "经纪公司佣金详情", name: "brokerageComm" },
        { label: "经纪人奖励佣金详情", name: "borkerReward" },
        { label: "好生活佣金详情", name: "efComm" }
      ]
    };
  },
  created() {
    this.rowInfos = this.$route.query;
    this.idInfos = {
      brokerId: this.rowInfos.brokerId,
      orderId: this.rowInfos.orderId
    };
    this.infos = [
      this.brokerTypes[this.rowInfos.brokerType],
      this.rowInfos.brokerageName,
      this.rowInfos.cityName,
      this.rowInfos.openBussinessName,
      this.rowInfos.devName,
      this.rowInfos.houseNum,
      this.rowInfos.customerName,
      utils.formatPhoneNumber(this.rowInfos.phoneNum)
    ];

    let tabsMap = {
          "0": ["brokerComm", "efComm"], //网络推客
          "-1": ["efComm"]               //自来客
        };
    let brokerType = this.rowInfos.brokerType;
    this.tabList = this.tabList.filter(({name},idx)=>{
      if (!tabsMap[brokerType]) {
        return true;
      }
     return tabsMap[brokerType].includes(name);
    })
    this.$nextTick(()=>{
        this.brokerActive = this.tabList[0].name;
    })
    
  },
  mounted() {},
  methods: {
    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus"></style>
